<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .one,.two,.three,.four{
            border: 1px solid #333;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
        <com-d></com-d>
    </div>
</body>
<script>
    // 如何定义Vue组件?
    // 1. 全局组件  => 借助Vue的静态方法 Vue.component
    // Vue.component(comp-name,options)
    // comp-name 组件名称(字符串) => 对于复杂的组件名称,建议使用中划线命名法/大驼峰命名法
    // options  => 当前组件的配置对象 => {data methods computed watch  生命周期钩子函数}

    // 特征: 
    // 只要注册一次,可以页面的任何位置(所有的vue实例)使用

    // 缺点:
    // 1. 组件之间的层级关系不明确
    // 2. 全局组件注册之后,不论是否使用,都会打包到项目的最终代码中   => 冗余代码 

    Vue.component("com-a",{
        data(){
            return {

            }
        },
        template:`<div class="one">
                <p>这是组件A</p>
                <com-b></com-b>
            </div>`,
    })

    Vue.component("com-b",{
        data(){
            return {

            }
        },
        template:`<div class="one">
            <p>这是组件B</p>
            <com-c></com-c>
            </div>`,
    })

    Vue.component("com-c",{
        data(){
            return {

            }
        },
        template:`<div class="one">
            <p>这是组件C</p>
            </div>`,
    })

    Vue.component("com-d",{
        data(){
            return {

            }
        },
        template:`<div class="one">
            <p>这是组件d</p>
            </div>`,
    })


    // 根实例/组件/应用
    var vm = new Vue({
        el:"#app",
        data:{

        },
    })



</script>
</html>